<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<style>
			.container{
				height:calc(100vh);
				width: 100%;
			}
			.list-item{
				display: flex;
				line-height: 30px;
			}
			.label{
				width: 30%;
				text-align: right;
			}
			.label-value{
				margin-left: 15px;
				color: rgba(0,0,0,.5);
			}
		</style>
	</head>
	<body>
		<div id="body">
			<mu-appbar style="width: 100%;position: fixed;top: 0;padding-top: 20px;height: auto;" color="primary">
				<mu-button icon slot="left" @click="util.back()">
					<mu-icon value="arrow_back"></mu-icon>
				</mu-button>
				我的小区
			</mu-appbar>
			<mu-container style="padding-top: 76px;">
				<mu-paper :z-depth="2" style="padding: 15px;margin-top: 15px;" v-for="(item,index) in buildingList" @click="goBuildingMeter(item)">
					<div style="font-weight: bold;">{{item.name}}</div>
					<mu-divider></mu-divider>
					<div class="list-item">
						<div class="label">抄表开始时间:</div>
						<div class="label-value">每周期尾月{{item.recordGasMeterStartDay}}日</div>
					</div>
					<div class="list-item">
						<div class="label">抄表结束时间:</div>
						<div class="label-value">每周期尾月{{item.recordGasMeterEndDay}}日</div>
					</div>
					<div class="list-item">
						<div class="label">抄表周期:</div>
						<div class="label-value">{{item.recordGasMeterTimes}}月/次</div>
					</div>
					<div class="list-item">
						<div class="label">缴费开始时间:</div>
						<div class="label-value">{{item.payStartDay==0?'不限制':item.payStartDay+'日'}}</div>
					</div>
					<div class="list-item">
						<div class="label">地址:</div>
						<div class="label-value">{{item.address}}</div>
					</div>
					<div class="list-item">
						<div class="label">当前期次:</div>
						<div class="label-value">{{item.currentPeriod}}</div>
					</div>
				</mu-paper>
			</mu-container>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					buildingId: "",
					buildingList: [],
				}
			},
			methods: {
				goBuildingMeter(building){
					util.setData("building",building)
					util.openWindow("my_building_meter.html")
				},
				getBuildingListByWorkerId() {
					util.ajax("/api/method/getBuildingListByWorkerId", null, data => {
						this.buildingList = data.object;
					}, true)
				}
			}
		})
		document.addEventListener('plusready', function() {
			vm.getBuildingListByWorkerId()
		});
	</script>
</html>
